<template>
	<div class="box">
		<div class="title">
			{{ item.title }}
		</div>
		<div class="para">
			<div>{{ item.data.title }}</div>
			<div class="para-line" v-for="(lineconfs, lineIndex) in paragraph">
				<template v-for="conf in lineconfs">
					<span v-if="conf.type === 'text'">
						{{ conf.cont }}
					</span>
					<xh-element
						:style="{
							width: conf.cont.data.width + 'px',
							display: 'inline-block'
						}"
						v-else-if="conf.type === 'form'"
						:value="item.value[lineIndex][conf.cont.key]"
						:item="conf.cont"
						:type="conf.cont.data.formType"
						:query="conf.cont.query"
						:relation="conf.cont.relation"
						:radio="conf.cont.radio"
						:disabled="conf.cont.disabled"
						:filterable="conf.cont.filterable"
						:allow-create="conf.cont.allowCreate"
						:multiple="conf.cont.multiple"
						:action="{ type: 'save' }"
						:params="conf.cont.data.params"
						@value-change="
							({ value }) => (item.value[lineIndex][conf.cont.key] = value)
						"
					></xh-element>
				</template>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import stringMixin from './stringMixin'
import decorateField from './formFn/decorateField'
const XhElement = () => import('./XhElement.vue')
export default {
	name: 'xh-input', // 新建 input
	mixins: [stringMixin],
	components: { XhElement },
	data() {
		return {
			paragraph: []
		}
	},
	inject: {
		createFields: {
			default: null
		},
		XhForm: {
			default: null
		}
	},
	methods: {
		initLines() {
			const paragraph = this.item.templates.map((template) => {
				const strings = template.split('{{')
				var tempConfs = [
					{
						type: 'text',
						cont: strings.shift()
					}
				]
				strings.forEach((str) => {
					const [fieldName, text] = str.split('}}')
					tempConfs.push(
						{
							type: 'form',
							cont: decorateField(
								this.item.fields.find(
									(field) => field.fieldName === fieldName.trim()
								)
							)
						},
						{
							type: 'text',
							cont: text
						}
					)
				})
				return tempConfs
			})
			this.paragraph = paragraph
		}
	},
	computed: {
		form() {
			return this.XhForm || this.createFields
		},
		placeholder() {
			var { placeholder } = this.item || {}
			return placeholder || '请输入'
		}
	},
	created() {
		this.initLines()
	}
}
</script>
<style lang="scss" scoped>
.para {
	display: block;
}
</style>
